<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>		
		<!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="../../static/js/Vue-2.6.12.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../static/js/axios.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <script src="http://cdn.staticfile.org/moment.js/2.24.0/moment.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.common.min.js"></script>
		
		<style>
			.el-row {
			    margin-bottom: 20px;
			    &:last-child {
			      margin-bottom: 0;
			    }
			  }
			  .el-col {
			    border-radius: 4px;
			  }			
			  .grid-content {
			      border-radius: 4px;
			      min-height: 36px;
			    }
			    .row-bg {
			      padding: 10px 0;
			      background-color: #f9fafc;
			    }
				.avatar-uploader .el-upload {
				    border: 1px dashed #d9d9d9;
				    border-radius: 6px;
				    cursor: pointer;
				    position: relative;
				    overflow: hidden;
				  }
				  .avatar-uploader .el-upload:hover {
				    border-color: #409EFF;
				  }
				  .avatar-uploader-icon {
				    font-size: 28px;
				    color: #8c939d;
				    width: 178px;
				    height: 178px;
				    line-height: 178px;
				    text-align: center;
				  }
				  .avatar {
				    width: 178px;
				    height: 178px;
				    display: block;
				  }
		</style>
	</head>
	<body>
		<div id="app">
			<el-row>
			  <el-col :span="3"><div class="grid-content"></div></el-col>
			</el-row>
			<el-row>
			  <el-col :span="3"><div class="grid-content"></div></el-col>
			  <el-col :span="18">
                        <el-date-picker
                                v-model="dateRange"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
				      <el-button type="primary" @click="findList">查询</el-button>
				  </el-form>

                  <div id="main" style="width: 1000px;height:400px;"></div>
				  
				  <el-table
				      :data="dataList"
				      border
				      style="width: 100%">
				      <el-table-column
				        prop="id"
				        label="id"
				        width="180">
				      </el-table-column>
				      <el-table-column
				        prop="name"
				        label="分类名称"
				        width="180">
				      </el-table-column>
                      <el-table-column
                              prop="money"
                              label="销售额"
                              width="180">
                      </el-table-column>
                      <el-table-column
                              prop="num"
                              label="销量"
                              width="180">
                      </el-table-column>
				    </el-table>
			  </el-col>
			  <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
			</el-row>		
				

		</div>
	</body>

	<script type="text/javascript">
		new Vue({
			el:"#app",
			data:{
                dataList:[],
                dateRange:[]

			},
			created(){
                this.find()
			},
            mounted(){
			    this.drawData()
            },
			methods:{
			    find(){
                    axios.get(`/order/countCagetoryReport.do`).then((res)=>{
                        this.dataList = res.data
                        this.drawData()
                    })
                },
                findList(){
                   let startDate= moment(this.dateRange[0]).format("YYYY-MM-DD")
                    let endDate= moment(this.dateRange[1]).format("YYYY-MM-DD")
                    axios.get(`/order/count1Category.do?startDate=${startDate}&endDate=${endDate}`).then((res)=>{
                        this.dataList = res.data
                        this.drawData()
                    })
                },
                drawData(){
                    let numData=[]
                    let moneyData=[]

                    this.dataList.forEach((c)=>{
                        numData.push( {value: c.num, name: c.name})
                        moneyData.push( {value: c.money, name: c.name})
                    })


                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));

                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '销售情况分析表',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            left: 'center',
                            top: 'bottom'
                        },
                        series: [
                            {
                                name: '销售量',
                                type: 'pie',
                                radius: [20, 140],
                                center: ['25%', '50%'],
                                data: numData
                            },
                            {
                                name: '销售额',
                                type: 'pie',
                                radius: [20, 140],
                                center: ['75%', '50%'],
                                data: moneyData
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
			}
		})
	</script>
</html>
